<template>
  <div class="block text-center">
    <el-carousel height="35rem">
      <el-carousel-item v-for="(item, index) in banners" :key="item">
        <div class="flex justify-center relative h-full">
          <div
            class="absolute w-full h-full bg-black/50 text-[3rem] flex items-start justify-center pl-[20rem] lg:pl-[28rem] flex-col"
          >
            <p
              class="m-0 color-[#fff] font-bold relative after:absolute after:left-0 after:bottom-0 after:content-[''] after:w-1/4 after:h-1 after:bg-[#ffcd11] text-left"
            >
              {{ item.title }}
            </p>
            <p class="text-[1.2rem] color-[#fff] mt-2">
              有工作要完成？我们全力支持您。从全球最大、经验最丰富的代理商网络获取支持。
            </p>
          </div>
          <div>
            <img class="w-full h-full object-cover" :src="item.img + `?index=${index}`" alt="" />
          </div>
        </div>
      </el-carousel-item>
    </el-carousel>
    <!-- content start -->
    <el-space
      class="pt-10 pb-10 w-3/5"
      alignment="center"
      :size="'large'"
      :fill="true"
      :fill-ratio="30"
    >
      <CateCard title="服务和支持" />
      <CateCard title="服务和支持" />
      <CateCard title="服务和支持" />
    </el-space>
    <div class="w-full bg-[#f8f8f8]">
      <el-space class="pt-10 pb-10 w-3/5" alignment="center" :size="'large'">
        <el-card v-for="item in 3">
          <h2 class="text-xl font-bold text-left m-0 break-all">
            重型机械经销商网络提供完备的支持和服务重型机械经销商网络提供完备的支持和服务
          </h2>
          <p class="text-left">
            来发现卡特彼勒为客户精心配置的重型机械经销商网络。我们了解完备的工程机械经销商网络对客户的重要性，因此在全球范围，我们就在您需要我们的地方。
          </p>

          <div
            class="group flex items-center hover:color-[#ffcd11] cursor-pointer text-left"
          >
            <span class="text-4 font-bold mr-2 transition-all">立即开始</span>
            <Icon
              class="group-hover:ml-1 group-hover:color-[#ffcd11] relative transition-all"
              name="mingcute:right-line"
              size="1rem"
            />
          </div>
        </el-card>
      </el-space>
    </div>
    <!-- content end -->
    <!-- footer start -->
    <div class="w-full bg-[#000] pt-10 pb-10 color-[#fff]">
      <el-space
        alignment="center"
        class="w-3/5"
        wrap
        :fill="true"
        :fill-ratio="16"
      >
        <el-space
          direction="vertical"
          alignment="start"
          :size="12"
          v-for="item in 6"
        >
          <h3 class="m-0 text-left w-full">产品</h3>
          <p v-for="item in 4" class="text-left text-[.9rem] w-full m-0">
            动力系统
          </p>
        </el-space>
      </el-space>
    </div>
    <!-- footer end -->
  </div>
</template>
<script setup>
const banners = ref([
  { title: "完成工作", img: "https://picsum.photos/1800/400" },
  // { title: "img", img: "https://picsum.photos/1800/400" },
  // { title: "img", img: "https://picsum.photos/1800/400" },
  // { title: "img", img: "https://picsum.photos/1800/400" },
  // { title: "img", img: "https://picsum.photos/1800/400" },
]);
</script>

<style scoped>
.demonstration {
  color: var(--el-text-color-secondary);
}

/* .el-carousel__item h3 {
  position: absolute;
  color: #475669;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
  text-align: center;
  width: 100%;
} */
</style>
